import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Link, withRouter } from 'react-router-dom';

import styles from './style.scss';
import Input from '@components/Input';
import Button from '@components/Button';
import Message from '@components/Message';
import Checkbox from '@components/Checkbox';
import Agreement from './Agreement';
import { getValueFromEvent } from '@utils/common'
import { Form, Modal } from 'antd';
const FormItem = Form.Item;

@withRouter
@inject('globalStore', 'signupStore')
@observer
export default class Signup extends Component {
    constructor(props) {
        super(props);

        document.title = '用户注册';
        this.store = props.signupStore;
    }
    componentWillMount() {
        this.store.refreshCaptcha();
    }

    componentWillUnmount() {
        this.store.reset();
    }

    onUsernameChange = evt => {
        this.store.setVal('username', getValueFromEvent(evt).trim());
    };
    onPasswordChange = evt => {
        this.store.setVal('password', getValueFromEvent(evt).trim());
    };
    onRepeatPasswordChange = evt => {
        this.store.setVal('repeatPassword', getValueFromEvent(evt).trim());
    };
    onSmsCodeChange = evt => {
        this.store.setVal('smsCode', getValueFromEvent(evt).trim());
    };
    onCaptchaChange = evt => {
        this.store.setVal('captcha', getValueFromEvent(evt).trim());
    };
    onSmsCodeBtnClick = evt => {
        this.store.openCaptchaModal();
    };
    onCaptchaModalCancel = evt => {
        this.store.setVal('isCaptchaModalOpen', false);
    };
    onCaptchaClick = () => {
        this.store.refreshCaptcha();
    };
    onCheckboxChange = evt => {
        this.store.setVal('isAgreeAgreement', evt.target.checked);
    };
    onSendSmsCodeSubmit = async evt => {
        await this.store.sendSmsCode();
        if (this.store.isSendSmsCodeSuccess) {
            Message.success('短信验证码发送成功');
        } else if (this.store.globalErrMsg) {
            Modal.error({ title: '信息提示', content: this.store.globalErrMsg, okText: '确认' });
        }
    };
    onSubmit = evt => {
        setTimeout(async () => {
            await this.store.signup();
            if (this.store.isSignupSuccess) {
                Message.success('注册成功');
                this.props.history.push('/login');
            } else if (this.store.globalErrMsg) {
                Modal.error({ title: '信息提示', content: this.store.globalErrMsg, okText: '确认' });
            }
        }, 1)
        return false;
    };

    onAgreementBtnClick = evt => {
        this.store.openAgreementModal();
    };

    onAgreementModalCancel = evt => {
        this.store.closeAgreementModal();
    };


    render() {
        const inputStyle = {
            width: '272px',
            height: '32px'
        };
        return (
            <div className={styles.signin}>
                <div className={styles.formTitle}>用户注册</div>
                <Form autoComplete="off" style={{ width: '272px' }}>
                    <FormItem
                        validateStatus={this.store.errMsg.username ? 'error' : ''}
                        help={this.store.errMsg.username || ''}
                    >
                        <Input
                            ysSize="D"
                            maxLength={11}
                            placeholder="请输入手机号码"
                            prefix={<i className={`${styles.icon} ${styles.iconUser}`}></i>}
                            onChange={this.onUsernameChange}
                            style={inputStyle}
                        />
                    </FormItem>
                    <FormItem
                        validateStatus={this.store.errMsg.password ? 'error' : ''}
                        help={this.store.errMsg.password || ''}
                    >
                        <Input
                            type="password"
                            ysSize="D"
                            maxLength={20}
                            placeholder="请输入6~20位密码"
                            prefix={<i className={`${styles.icon} ${styles.iconPwd}`}></i>}
                            onChange={this.onPasswordChange}
                            style={inputStyle}
                        />
                    </FormItem>
                    <FormItem
                        validateStatus={this.store.errMsg.repeatPassword ? 'error' : ''}
                        help={this.store.errMsg.repeatPassword || ''}
                    >
                        <Input
                            type="password"
                            ysSize="D"
                            maxLength={20}
                            placeholder="请输入确认密码"
                            prefix={<i className={`${styles.icon} ${styles.iconPwd}`}></i>}
                            onChange={this.onRepeatPasswordChange}
                            style={inputStyle}
                        />
                    </FormItem>
                    <FormItem
                        validateStatus={this.store.errMsg.smsCode ? 'error' : ''}
                        help={this.store.errMsg.smsCode || ''}
                    >
                        <Input
                            ysSize="C"
                            maxLength={6}
                            prefix={<i className={`${styles.icon} ${styles.iconCaptcha}`}></i>}
                            onChange={this.onSmsCodeChange}
                            style={{
                                width: '160px',
                                height: inputStyle.height,
                            }}
                        />
                        <Button
                            type="E"
                            disabled={this.store.isSmsCodeBtnDisabled}
                            style={{ width: '102px', height: '32px', marginLeft: '10px' }}
                            onClick={this.onSmsCodeBtnClick}
                        >
                            {
                                this.store.smsCodeTimeout > 0 ? `${this.store.smsCodeTimeout}秒` : '获取验证码'
                            }
                        </Button>
                    </FormItem>
                    <FormItem style={{ marginBottom: 0 }}>
                        <div>
                            <Checkbox onChange={this.onCheckboxChange} value="1">
                                <span style={{ fontSize: '12px', color: '#a1b1be', marginLeft: '-2px' }}>我已阅读并同意</span>
                            </Checkbox>
                            <a href="javascript:" style={{ fontSize: '12px', marginLeft: '-10px' }} onClick={this.onAgreementBtnClick}>《允升云供应链联盟注册协议》</a>
                        </div>
                        <div>
                            <Button
                                type="A"
                                htmlType={"submit"}
                                onClick={this.onSubmit}
                                style={{ width: '100%' }}
                                disabled={this.store.isSubmitBtnDisabled}
                            >注册</Button>
                        </div>
                        <div>
                            已有账号，请
                            <Link to="/login">登录</Link>
                        </div>
                    </FormItem>
                </Form>
                <Modal
                    title="图片验证"
                    visible={this.store.isCaptchaModalOpen}
                    maskClosable={false}
                    onCancel={this.onCaptchaModalCancel}
                    width={500}
                    footer={null}
                >
                    <Form autoComplete="off">
                        <FormItem
                            validateStatus={this.store.errMsg.captcha ? 'error' : ''}
                            help={this.store.errMsg.captcha || ''}
                            label="验证码"
                            required={true}
                            colon={false}
                            labelCol={{
                                span: 4,
                                offset: 2,
                            }}
                            wrapperCol={{
                                span: 16,
                            }}
                        >
                            <Input
                                ysSize="C"
                                maxLength={6}
                                value={this.store.captcha}
                                onChange={this.onCaptchaChange}
                                style={{
                                    width: '190px',
                                    height: inputStyle.height,
                                }}
                            />
                            <span className={styles.captcha}>
                                <img
                                    src={this.store.captchaUrl}
                                    alt="captcha"
                                    onClick={this.onCaptchaClick}
                                    width="100%"
                                    height="100%"
                                    style={{ marginTop: '-4px' }}
                                />
                            </span>
                        </FormItem>
                        <FormItem
                            wrapperCol={{
                                span: 4,
                                offset: 6
                            }}
                        >
                            <Button
                                type="A"
                                disabled={this.store.isSendSmsCodeBtnDisabled}
                                onClick={this.onSendSmsCodeSubmit}
                            >确定</Button>
                        </FormItem>
                    </Form>
                </Modal>
                <Modal
                    title="允升科技用户注册协议"
                    visible={this.store.isAgreementModalOpen}
                    maskClosable={false}
                    onCancel={this.onAgreementModalCancel}
                    width={1000}
                    footer={null}
                >
                    <Agreement />
                </Modal>
            </div>
        );
    }
}
